<div class="modal modal-default fade show" id="modal-posts" ng-init="getList()">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">List of posts</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <!-- <div class="modal-body" style="height: calc(100vh - 143px);overflow-y: auto;"> -->
      <div class="modal-body">
        <section class="">
          <filter-list
            request="request"
            callback="getList(pageIndex)"
          ></filter-list>
          <mix-data-table
            ng-init="getList()"
            data="data"
            can-drag="request.orderBy === 'Priority' && request.direction === '0'"
            edit-url="'/portal/permission/details'"
            columns="columns"
            child-name="'childs'"
            on-delete="remove(id)"
            on-update-infos="updateInfos(items)"
            on-update-child-infos="updateChildInfos(items)"
          ></mix-data-table>
          <paging
            class="small"
            page="data.page"
            page-size="data.pageSize"
            total="data.totalItems"
            ul-class="pagination justify-content-end m-0"
            a-class="page-link"
            paging-action="loadProducts(page-1)"
            scroll-top="true"
          >
          </paging>
        </section>
        <table
          id="list-page"
          class="table table-sm table-hover sortable"
          cellspacing="0"
          ng-init="getList()"
        >
          <thead class="thead-light">
            <tr>
              <th scope="col" style="width: 3%">
                <small
                  class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
                ></small>
              </th>
              <th scope="col" style="width: 4%">
                <span
                  class="fa fa-grip-vertical fa-xs text-black-50-numeric-down"
                ></span>
              </th>
              <th scope="col" style="width: 25%">Title</th>
              <th scope="col" width="10%">Image</th>

              <th scope="col" style="width: 10%">Author</th>

              <th scope="col" style="width: 5%"></th>
            </tr>
          </thead>

          <tbody class="sortable">
            <tr
              ng-repeat="item in data.items track by $index"
              class="sortable-item"
              sort-model="post"
              sort-model-id="{{item.id}}"
            >
              <td style="cursor: grab" class="drag-header">
                <small
                  class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
                ></small>
              </td>
              <td>
                <input
                  type="text"
                  value="{{item.priority}}"
                  class="item-priority form-control form-control-sm d-inline"
                  style="width: 40px"
                />
              </td>
              <td>{{item.title}}</td>
              <td>
                <div ng-if="item.image!=''">
                  <img height="50" ng-src="{{item.imageUrl}}" />
                </div>
              </td>

              <td>{{item.createdBy}}</td>

              <td>
                <div
                  class="btn-group btn-group-sm btn-group-sm float-end"
                  role="group"
                  aria-label="Actions"
                >
                  <a
                    href="/portal/post/details/{{item.id}}"
                    class="btn btn-dark"
                  >
                    <span class="fas fa-pen text-primary"></span>
                  </a>
                  <a
                    href="{{item.detailsUrl}}"
                    target="_blank"
                    class="btn btn-dark"
                  >
                    <span class="fas fa-eye text-info"></span>
                  </a>

                  <a
                    ng-click="remove(item.categoryId,itemId);"
                    class="btn btn-dark"
                  >
                    <span class="fas fa-trash-alt text-danger"></span>
                  </a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <!-- <div class="col-md-7">
                                    <div class="col-md-12" role="toolbar" aria-label="Toolbar with button groups">
                                        <custom-file header="''" folder="'Medias'" media-file="viewmodel.mediaFile" data="viewmodel"
                                            src-url="viewmodel.mediaFile.fullPath" save="save()" auto="'false'" class=""></custom-file>
                                    </div>
                                </div> -->
        <paging
          class="small"
          page="data.page"
          page-size="data.pageSize"
          total="data.totalItems"
          ul-class="pagination justify-content-end m-0"
          a-class="page-link"
          paging-action="getList(page-1)"
          scroll-top="true"
        ></paging>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
